<template>
  <div class="login flex justify-center align-center">
    <div>
      <div class="logo-ground">
        <img src="../../assets/icons/sw_logo.png"
             alt />
      </div>
      <div class="form">
        <el-form :model="ruleForm"
                 status-icon
                 :rules="rules"
                 ref="ruleForm"
                 label-width="0"
                 class="demo-ruleForm">
          <el-form-item>
            <h1 class="text-center title margin-bottom-xs">登录</h1>
            <div class="text-center admin-name">欢迎使用商为物联平台</div>
          </el-form-item>
          <el-form-item label
                        prop="username">
            <el-input prefix-icon="el-icon-user"
                      v-model="ruleForm.username"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label
                        prop="password">
            <el-input prefix-icon="el-icon-lock"
                      type="password"
                      v-model="ruleForm.password"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex justify-end align-center margin-bottom-sm">
              <a href="#">忘记密码 ?</a>
            </div>
            <el-button type="primary"
                       class="submit-btn"
                       @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
          <el-form-item>
            <div class="text-center margin-top">
              <span class="text">还没有账号？</span>
              <a href="#">注册</a>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  data() {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空！'))
      }
      callback()
    }
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码！'))
      }
      callback()
    }

    return {
      ruleForm: {
        username: 'admin',
        password: '123456',
        verifyToken: '',
        code: ''
      },
      rules: {
        username: [{ validator: checkPhone, trigger: 'blur' }],
        password: [{ validator: checkPassword, trigger: 'blur' }]
      }

    }
  },
  created() {
    //
  },
  methods: {
    ...mapActions(['user/login']),
    submitForm(loginForm) {
      // this.$utils.token.set('5588885')
      // this.$router.replace({
      //   path: '/home'
      // })
      this.$refs[loginForm].validate(valid => {
        if (valid) {
          this['user/login'](this.ruleForm).then(res => {
            this.$router.replace({
              path: '/home'
            })
          })
        } else {
          return false
        }
      })
    }
  }


}
</script>

<style lang="scss" scoped>
@import '@styles/variable.scss';
.login {
  width: 100%;
  height: 100%;
  background-color: #f5f5ff;
  .logo-ground {
    text-align: center;
    img {
      width: 180px;
      border-radius: 20px;
      margin-bottom: 20px;
    }
  }
  .form {
    width: 450px;
    height: 480px;
    box-sizing: border-box;
    padding: 40px;
    box-shadow: 0 0 13px 0 rgba(82, 63, 105, 0.05);
    border-radius: 20px;
    background-color: #fff;
    .title {
      font-size: 26px;
      font-weight: 500;
    }
    .admin-name {
      color: #4c4c4c;
      font-size: 17px;
    }
    .submit-btn {
      width: 100%;
    }
    .text {
      color: #a0a0a0;
    }
  }
}
</style>
